# LuckPay Web Manage System
#
# Copyright (c) 2016 Lucky Byte, Inc.
#
$ ->
    run_chart = echarts.init(document.getElementById('run_chart'))

    options = {
        color: ['grey', '#3399ff', '#ff3399']
        title: {
            text: '当天交易走势'
            subtext: '按分钟统计，不包含无交易时间'
            left: 'center', top: 10
            textStyle: { fontSize: 16, color: '#666' }
        },
        grid: {
            show: false, z: 0,
            left: 50, right: 30, top: 5, bottom: 80
        }
        tooltip: {
            formatter: (params) ->
                # if params.data.type == 'average' then return ''
                if params.data.value[0]
                    time = params.data.value[0].split(' ')
                    return time[1] + " ：" + params.data.value[1] + ' 笔'
                else
                    return params.data.value

            textStyle:
                fontWeight: 'bold'
        },
        toolbox: {
            show: true, right: 36, top: 10
            feature: {
                saveAsImage: {}
            },
        },
        legend: {
            right: 80, top: 10, orient: 'vertical'
            data: [ '全部交易', '清算交易', '失败交易' ]
        },
        xAxis: {
            type: 'time',
            splitLine: show: false
        },
        yAxis: {
            type: 'value'
            splitLine: lineStyle: color: '#ddd'
        },
        series: [{
            name: '全部交易', type: 'line',
            lineStyle: normal: width: 1, shadowColor: 'rgba(0, 0, 0, 0.3)', shadowBlur: 10
            markLine: data: [ type: 'average', name: '均值' ]
        }, {
            name: '清算交易', type: 'line',
            lineStyle: normal: width: 1, shadowColor: 'rgba(0, 0, 0, 0.3)', shadowBlur: 10
            markPoint: data: [ type: 'max', name: '峰值' ], symbolSize: 40
            markLine: data: [ type: 'average', name: '均值' ]
        }, {
            name: '失败交易', type: 'line',
            lineStyle: normal: width: 2, shadowColor: 'rgba(0, 0, 0, 0.3)', shadowBlur: 10
            markPoint: data: [ type: 'max', name: '峰值' ], symbolSize: 40
        }],
        dataZoom: [ {
            type: 'slider', start: 0, end: 100
            backgroundColor: 'rgba(128, 128, 128, 0.3)'
            dataBackgroundColor: 'rgba(128, 128, 128, 1.0)'
        }, {
            type: 'inside', start: 0, end: 100
        }]
    }
    run_chart.setOption options

    do_update = ->
        run_chart.showLoading text:'正在更新 ...', maskColor:'rgba(0,0,0,0.0)'
        $.post '/index/rundata', {
        }, (resp) ->
            run_chart.hideLoading()
            return if not resp.succ
            # 计算显示区域的起始位置
            # 起始位置为最后30个统计点的开始位置，如果总数不足30，则显示全部
            zoom_start = (1 - 30 / resp.all_data.length) * 100
            zoom_start = 0 if zoom_start < 0
            run_chart.setOption {
                series: [{
                    name: '全部交易', data: resp.all_data
                }, {
                    name: '清算交易', data: resp.settl_data
                }, {
                    name: '失败交易', data: resp.error_data
                }],
                dataZoom: [{
                    type: 'slider', start: zoom_start, end: 100
                }, {
                    type: 'inside', start: zoom_start, end: 100
                }]
            }

    # 加载后立即更新一次
    do_update()

    # 间隔一分钟刷新一次(如果没有关闭自动刷新的话)
    setInterval ->
        if Cookies.get('index.auto_refresh') isnt 'off'
            do_update()
    , 1000 * 60

    # 设置自动刷新，采用 Cookie 保存设置
    $('.checkbox#auto_refresh').checkbox
        onChecked: ->
            Cookies.set 'index.auto_refresh', 'on', expires: 365, path: '/'
        onUnchecked: ->
            Cookies.set 'index.auto_refresh', 'off', expires: 365, path: '/'

    # 用保存的设置设置自动刷新按钮的状态
    if Cookies.get('index.auto_refresh') isnt 'off'
        $('.checkbox#auto_refresh').checkbox 'set checked'
    else
        $('.checkbox#auto_refresh').checkbox 'set unchecked'
